<template>
    <div>
        <h2>显示</h2>
        <table>
        <tbody>
            <tr>
                <td>
                    <input type="text" v-model="start.name">
                    <button type="button" class="btn btn-primary" @click="GetShopShows">查询</button>
                </td>
            </tr>
        </tbody>
    </table>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                <td>项目名称</td>
                <td>项目编号</td>
                <td>服务人数</td>
                <td>服务时长</td>
                <td>佣金</td>
                <td>项目说明</td>
                <td>说明</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in shopshow">
                <td>{{ item.name }}</td>
                <td>{{ item.bianhao }}</td>
                <td>{{ item.hour }}</td>
                <td>{{ item.people }}</td>
                <td>{{ item.money }}</td>
                <td>{{ item.shouMing }}</td>
                <td>{{ item.zhuangTai }}</td>
                <td>{{ item.start }}</td>
                <td>
                     <a @click="Delete(item.id)" >删除</a>
                    <a @click="Update(item.id)">修改</a>
                    <button v-if="item.start == 0" @click="UpdStart(item.id, 1)" style="color: green;">启用</button>
                    <button v-if="item.start == 1" @click="UpdStart(item.id, 0)" style="color: yellow;">禁用</button> 
                </td>
            </tr>

            </tbody>
        </table>

        <table>
        <tbody>
            <tr>
                <td>
                    <button class="btn btn-primary" @click="show('a')">上一页</button>
                    <button class="btn btn-primary" @click="show('b')">下一页</button>
                    <button class="btn btn-primary" @click="show('c')">首页</button>
                    <button class="btn btn-primary" @click="show('d')">尾页</button>
                    共{{ count }}条,当前第{{ start.index }}/{{ start.size }},共有{{ sum }}页
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter } from "vue-router";

const route=useRouter();
const shopshow=ref([]);
const form:any=reactive({
    start:{
        name:'',
        index:1,
        size:2
    },
    list:[],
    count:0,
    sum:0
})
const {start,list,count,sum}=toRefs(form)
const GetShopShows=()=>{
    let obj={
        name:start.value.name,
        index:start.value.index,
        size:start.value.size
    }
 
    axios.get("https://localhost:7189/api/shop/showshop?Name="+obj.name+"&index="+obj.index+"&size="+obj.size).then(res=>{
        console.log(res);
        shopshow.value=res.data.data;
        count.value=res.data.count;
        sum.value=res.data.sum;
       
    })



}

//分页
const show = (e) => {
    switch (e) {
        case 'a':
            if (start.value.index == 1) {
                alert("已是第一页")
                break;
            }
            start.value.index -= 1
            break;
        case 'b':
            if (start.value.index == sum.value) {
                alert("已是最后一页")
                break;
            }
            start.value.index += 1
            break;
        case 'c':
            if (start.value.index == 1) {
                alert("已是第一页")
                break;
            }
            start.value.index = 1
            break;
        case 'd':
            if (start.value.index == sum.value) {
                alert("已是最后一页")
                break;
            }
            start.value.index = sum.value
            break;
    }
    GetShopShows();
}

onMounted(()=>{
    GetShopShows();
})

</script>

<style scoped>

</style>